<div class="cardView-container">
    <div class="pm_grid card-name">
        <label for="fullname" translate translate-context="Label">Name on card</label>
        <div class="input-icon">
            <i class="fa fa-user"></i>
            <input type="text" autofocus id="fullname" name="fullname" ng-model="card.fullname" placeholder-translate-context="Example user" placeholder-translate="Thomas Anderson" required />
            <div ng-messages="form.fullname.$error">
                <p ng-message="required" class="text-red" translate-context="Error" translate>Field required</p>
            </div>
        </div>
    </div>
    <div class="pm_grid card-number">
        <label for="cardnumber" translate translate-context="Label">Card Number</label>
        <div class="input-icon">
            <card-icon class="card-number-icon" number="card.number"></card-icon>
            <input type="text" id="cardnumber" name="cardnumber" ng-model="card.number" placeholder="0000 0000 0000 0000" data-card-number maxlength="20" required />
            <div ng-messages="form.cardnumber.$error">
                <p ng-message="required" class="text-red" translate-context="Error" translate>Field required</p>
                <p ng-message="cardNumber" class="text-red" translate-context="Error" translate>Invalid card number</p>
            </div>
        </div>
    </div>
    <div class="pm_grid card-metas">
        <div class="col-1-3 card-metas-expiry">
            <label translate translate-context="Label">Expiry Date</label>
            <span class="pm_select">
                <select ng-model="card.month" ng-options="month for month in months" ng-init="card.month = months[0]"></select>
                <i class="fa fa-angle-down"></i>
            </span>
        </div>
        <div class="col-1-3 card-metas-year">
            <label>&nbsp;</label>
            <span class="pm_select">
                <select ng-model="card.year" ng-options="year for year in years" ng-init="card.year = years[0]"></select>
                <i class="fa fa-angle-down"></i>
            </span>
        </div>
        <div class="col-1-3 card-metas-cvc">
            <label for="cvc" translate translate-context="Label">Security Code</label>
            <div class="input-icon right">
                <i class="fa fa-question-circle" data-cvc-tooltip></i>
                <input type="text" id="cvc" name="cvc" ng-model="card.cvc" maxlength="4" card-cvc required />
                <div ng-messages="form.cvc.$error">
                    <p ng-message="required" class="text-red" translate-context="Error" translate>Field required</p>
                    <p ng-message="cardCvc" class="text-red" translate-context="Error" translate>Invalid CVC</p>
                </div>
            </div>
        </div>
    </div>
    <div class="pm_grid card-zip">
        <div class="col-1-2 card-zip-code">
            <label for="zip" translate translate-context="Label">ZIP/Postal Code</label>
            <input type="text" minlength="3" maxlength="9" id="zip" name="zip" ng-model="card.zip" required />
            <div ng-messages="form.zip.$error">
                <p ng-message="required" class="text-red" translate-context="Error" translate>Field required</p>
            </div>
        </div>
        <div class="col-1-2 card-zip-country">
            <label for="country" translate translate-context="Label">Country</label>
            <span class="pm_select">
                <select id="country" ng-model="card.country" ng-options="country.label disable when country.disabled for country in countries"></select>
                <i class="fa fa-angle-down"></i>
            </span>
        </div>
    </div>
</div>
